<template>
	<view>
		<!-- 头部输入框 -->
		
		<!-- 聊天内容 -->
		<view class="chat-content">
			<!-- 男 -->
			<view class="man">
				<!-- 复制 -->
				<view class="man-copy">
					<image src="../../static/imag/icon_a1.png"></image>
				</view>
				<!-- 聊天内容 -->
				<view class="man-text">
					假如,我是说加入,假如你是我女朋友我们在一起面对问题的时候要做出选择,那么你觉得你会听我的还是让我听你的？
					<!-- 右箭头 -->
					<view class="rightArrow"></view>
				</view>
				<!-- 头像 -->
				<view class="man-image">
					<image src="../../static/imag/icon_a1.png"></image>
				</view>
			</view>
			
			<!-- 女 -->
			<view class="woman">
				<!-- 头像 -->
				<view class="woman-image">
					<image src="../../static/imag/icon_a1.png"></image>
				</view>
				<!-- 聊天内容 -->
				<view class="woman-text">
					拿的看情况吧,估计你得听我的
				</view>
				<!-- 复制 -->
				<view class="woman-copy">
					<image src="../../static/imag/icon_a1.png"></image>
				</view>
			</view>
			
			<!-- 男 -->
			<view class="man">
				<!-- 复制 -->
				<view class="man-copy">
					<image src="../../static/imag/icon_a1.png"></image>
				</view>
				<!-- 聊天内容 -->
				<view class="man-text">
					不行,凡事都要听我的
					<!-- 右箭头 -->
					<view class="rightArrow"></view>
				</view>
				<!-- 头像 -->
				<view class="man-image">
					<image src="../../static/imag/icon_a1.png"></image>
				</view>
			</view>
			
			<!-- 女 -->
			<view class="woman">
				<!-- 头像 -->
				<view class="woman-image">
					<image src="../../static/imag/icon_a1.png"></image>
				</view>
				<!-- 聊天内容 -->
				<view class="woman-text">
					你咋这么大男子主义
				</view>
				<!-- 复制 -->
				<view class="woman-copy">
					<image src="../../static/imag/icon_a1.png"></image>
				</view>
			</view>
	
	
	<!-- 男 -->
	<view class="man">
		<!-- 复制 -->
		<view class="man-copy">
			<image src="../../static/imag/icon_a1.png"></image>
		</view>
		<!-- 聊天内容 -->
		<view class="man-text">
			那必须的,我是家里的掌柜啊,不听我的听谁的,女人都是头发长见识短
			<!-- 右箭头 -->
			<view class="rightArrow"></view>
		</view>
		<!-- 头像 -->
		<view class="man-image">
			<image src="../../static/imag/icon_a1.png"></image>
		</view>
	</view>
	
	<!-- 女 -->
	<view class="woman">
		<!-- 头像 -->
		<view class="woman-image">
			<image src="../../static/imag/icon_a1.png"></image>
		</view>
		<!-- 聊天内容 -->
		<view class="woman-text">
			你这是性别歧视吧,女人没你想的那么无能
		</view>
		<!-- 复制 -->
		<view class="woman-copy">
			<image src="../../static/imag/icon_a1.png"></image>
		</view>
	</view>
		
	
	
	
	
	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	// 聊天内容
	.chat-content {
		background-color: #fff;
		padding: 30rpx;
		margin: 30rpx;
		font-size: 22rpx;
		// 男
		.man {
			display: flex;
			justify-content: flex-end;
			
			
			// 男生头像
			.man-image{
				width: 44rpx;
				height: 44rpx;
			}
			.man-text{
				margin-right: 40rpx;
				max-width:450rpx;
				background-color: #93ec6c;
				padding: 15rpx;
				position: relative;
				border-radius: 8rpx;
				.rightArrow{
					position: absolute;
					right: -36rpx;
					top: 0;
					width: 0;
					height: 0;
					border: 20rpx solid;
					border-color: transparent   transparent transparent #93ec6c;
					
				}
			}
			// 复制按钮
			.man-copy{
				height: 100%;
				margin:5% 30rpx 0 0;
				width: 40rpx;
				height: 40rpx;
			}

		}
		// 女
		.woman {
			margin: 20rpx 0;
			display: flex;
			justify-content: flex-start;
			// 头像
			.woman-image{
				width: 44rpx;
				height: 44rpx;
			}
			// 内容
			.woman-text{
				background-color: #efeeef;
				padding: 15rpx;
				margin: 0 20rpx 0 40rpx;
				border-radius: 8rpx;
				
			}
			// 复制
			.woman-copy{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
	}
</style>
